<template>
    <div class="app-container">
        <el-card shadow="always" style="width: 50%;margin-top: 5px;">
            <div class="chart-box target-change">
                <div class="box-title">近期能力订阅</div>
                <div class="chart" id="leftChart"></div>
            </div>
        </el-card>
        <div style="display: flex;flex-wrap: wrap;margin-left: 5px;width: 50%;">
            <el-card shadow="always" style="width: 100%;margin-top: 5px;height: 38vh;">
                <div class="div">
                    <div class="box-title">近期能力订阅排行</div>
                    <div class="forPlay">
                        <div v-if="capSub.length > 0" class="tbTbody" :style="autoRun">
                            <div class="tbTr" v-for="(item, index) in capSub" :key="index">
                                <div class="tbTd tbThL" style="cursor: pointer">
                                    {{ item.name }}
                                </div>
                                <div class="tbTd tbThS" style="cursor: pointer">
                                    <span v-if="item.isOnline == 1" style="color: green">
                                         {{item.total}}
                                    </span>
                                    <span v-if="item.isOnline == -1" style="color: red">
                                         {{item.total}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card shadow="always" style="width: 100%;margin-top: 3px;height:37.5vh;">
                <div class="div">
                    <div class="box-title">总排行</div>
                    <div class="forPlay">
                        <div v-if="capSub.length > 0" class="tbTbody" :style="autoRun">
                            <div class="tbTr" v-for="(item, index) in capSub2" :key="index">
                                <div class="tbTd tbThL" style="cursor: pointer">
                                    {{ item.name }}
                                </div>
                                <div class="tbTd tbThS" style="cursor: pointer">
                                    <span v-if="item.isOnline == 1" style="color: green">
                                        {{item.total}}
                                    </span>
                                    <span v-if="item.isOnline == -1" style="color: red">
                                        {{item.total}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {getsub} from "@/api/statistics/statistics";

export default {
    name: 'CapSub',
    data() {
        return {
            leftChartData: [],
            leftChart: null,
            //滚动定时器
            leftInterval: null,
            //1
            autoValue: 0,
            autoValueLenth: 9,
            currentautoValue: 10,
            capSub: [


            ],
             //
            capSub2: [


            ],
        }
    },
    computed: {
        autoRun() {
            return "transform: translateY(" + this.autoValue + "%);transition: 1.5s";
        },

    },
    mounted() {
        // 自动滚动表格定时器
        this.leftInterval = setInterval(() => {
            this.currentautoValue = this.currentautoValue + 1;
            if (this.currentautoValue + 6 > this.autoValueLenth) {
                this.currentautoValue = 0;
                this.autoValue = 0;
            } else {
                this.autoValue = this.autoValue - 17;
            }
        }, 4000);
        getsub().then(res => {
            this.capSub = res.data.recentRanking

          if(this.capSub.length==0){
            this.capSub = [
              {
                name: '暂无数据',
                total: 0,
                isOnline: 1
              }
            ]
          }
            this.capSub2 = res.data.ranking
          if(this.capSub2.length==0){
            this.capSub2 = [
              {
                name: '暂无数据',
                total: 0,
                isOnline: 1
              }
            ]
          }

          this.leftChartData = res.data.erlist

          this.getleftChart( this.leftChartData)
        })


    },
    methods: {
      renderTime(date) {
        // 将传入的日期字符串或日期对象转换为 Date 对象
        const dateObj = new Date(date);

        // 使用 padStart 方法确保月份和日期始终为两位数
        const year = dateObj.getFullYear();
        const month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
        const day = dateObj.getDate().toString().padStart(2, '0');

        // 返回格式化的年月日字符串
        return `${year}-${month}-${day}`;
      }
      ,
        getleftChart(data) {
            let datax = []
            let ins = []
            let outs = []
            data.forEach((item, index) => {
                datax.push(this.renderTime(item.time) )
                // ins.push(item.ins)
                outs.push(item.outs)
            })
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: 0,
                    right: 20,
                    bottom: 22,
                    top: 50,
                    containLabel: true
                },
                legend: {
                    data: ['sub'],
                    right: 10,
                    top: 12,
                    textStyle: {
                        color: "#000"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },
                xAxis: {
                    type: 'category',
                    data: datax,
                    axisLabel: {
                        margin: 10,
                        color: 'rgba(24, 29, 25, 1)',
                        fontFamily: 'PingFang SC',
                        fontWeight: 400,
                        fontSize: 14,
                    },
                    axisTick: {//坐标轴刻度相关设置。
                        show: false,
                    },
                    axisLine: {//坐标轴轴线相关设置
                        lineStyle: {
                            color: '#E5E9ED',
                            // opacity:0.2
                        }
                    },
                    splitLine: { //坐标轴在 grid 区域中的分隔线。
                        show: false,
                        lineStyle: {
                            color: '#E5E9ED',
                            // 	opacity:0.1
                        }
                    }
                },
                yAxis: {
                    minInterval: 1, //不允许出现小数位
                    axisTick: { show: false },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(120, 203, 255, .2)'
                        }
                    },
                    splitArea: { show: false },
                    axisLine: { show: false },
                    axisLabel: {
                        margin: 5,
                        color: 'rgba(24, 29, 25, 1)',
                        fontFamily: 'PingFang SC',
                        fontSize: 14,
                    }
                },
                series: [
                    {
                        name: 'sub',
                        type: 'line',
                        barWidth: '15%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8bd46e'
                            }, {
                                offset: 1,
                                color: '#09bcb7'
                            }]),
                            borderRadius: 11,
                        },
                        data: ins,
                        stack: 'x',
                        areaStyle: {},
                    },
                    {
                        name: 'sub',
                        type: 'line',
                        barWidth: '15%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#248ff7'
                            }, {
                                offset: 1,
                                color: '#6851f1'
                            }]),
                            borderRadius: 11,
                        },
                        data: outs,
                        areaStyle: {}
                    }]
            };
            this.leftChart = this.getEchartsInstance('leftChart')
            this.leftChart.setOption(option, true)
        },
        // echarts获取实例 画图
        getEchartsInstance(id) {
            let chart = echarts.getInstanceByDom(document.getElementById(id))
            if (chart === undefined) {
                chart = echarts.init(document.getElementById(id), null, { renderer: 'svg' })
            }
            return chart
        }
    },
    watch: {
        // 监听左侧菜单收缩 调整echarts图表大小
        "$store.state.app.sidebar": {
            deep: true,
            handler: function (newVal, oldVal) {
                setTimeout(() => { // 因为elementUI的侧边栏收缩展开的延时时间是300
                    this.leftChart.resize()
                }, 300)
            }
        },
    },

}
</script>

<style scoped lang="scss">
.app-container {
    margin: 0;
    display: flex;
    align-items: center;
    padding: 20 10px;

    .el-card {
        .chart-box {
            width: 100%;
            height: 73vh;
            margin-top: -15px;
            position: relative;

            .box-title {
                height: 37px;
                width: 90%;
                margin: 0 auto;
                font-size: 23px;
                font-family: PingFang SC;
                font-weight: 600;
                color: #00C0FF;
                text-align: center;
                line-height: 33px;
            }

            .chart {
                width: 96%;
                height: calc(100% - 37px);
                position: absolute;
                left: -60%;
                right: -60%;
                margin: 0 auto;
            }
        }
    }
}

.div {
    height: 280px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    text-align: center;
    margin-top: -15px;
    font-size: 20px;
    color: rgba(61, 189, 255, 1);

    .box-title {
        height: 37px;
        width: 100%;
        margin: 0px auto;
        font-size: 23px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #00C0FF;
        text-align: center;
        line-height: 33px;
    }

    .forPlay {
        height: 90%;
        width: 100%;
        overflow: auto;

        .tbTbody {
            height: 100%;
            width: 100%;

            // margin-top: 20px;
            .tbTr {
                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-wrap: nowrap;
                color: #1a1919;
                font-size: 13px;
                /* margin-bottom: 2%;*/
                height: 17%;

                .tbThL {
                    width: 30%;
                    text-align: center;
                }

                .tbThS {
                    width: 20%;
                    text-align: center;
                }
            }

            .tbTr:nth-child(even) {
                background: rgba(14, 205, 246, 0.07);
            }

            .tbTr:nth-child(odd) {
                background: rgba(14, 246, 242, 0.17);
            }
        }
    }

    /* 隐藏滚动条 */
    .forPlay::-webkit-scrollbar {
        width: 0 !important;
    }
}
</style>
